import { HtmlNode, HtmlNodeModel } from "@logicflow/core";

class ExpandNodeModel extends HtmlNodeModel {
  setAttributes() {
    this.isHovered = true
    this.isSelected = false // 禁止拖动
    this.draggable = false // 禁止拖动
    this.text.editable = false; // 禁止节点文本编辑
    // 设置节点宽高和锚点
    const width = 45;
    const height = 25;
    this.width = width;
    this.height = height;
    this.anchorsOffset = [
      [width / 2, 0],
      [0, height / 2],
      [-width / 2, 0],
      [0, -height/2],
    ]
  }
}

class ExpandNode extends HtmlNode {
  setHtml(rootEl) {
    const { properties } = this.props.model;

    const el = document.createElement('div');
    el.className = `expand-node`;
    const html = `
      <span>${properties.isExpand ? '收缩' : '展开'}</span>
    `
    el.innerHTML = html;
    // 需要先把之前渲染的子节点清除掉。
    rootEl.innerHTML = '';
    rootEl.appendChild(el);
  }
}

const Expand = {
  type: 'expand',
  view: ExpandNode,
  model: ExpandNodeModel
}

export default Expand;